<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">
    <!-- Slider home page -->
    <div class="bannercontainer responsive">					
        <div class="banner">
            <ul>
                <!-- BOXFADE -->
                <li data-transition="boxfade" data-slotamount="5" data-thumb=""> 		
                    <img src="resources/images/slides/image1.jpg" />																	
                    <div class="caption lfb big_white" data-x="400" data-y="80" data-speed="900" data-start="1700" data-easing="easeOutBack">Kickstart Your Website</div>
                    <div class="caption lft big_orange" data-x="400" data-y="117" data-speed="900" data-start="1900" data-easing="easeOutBack"><span style="font-weight:normal;">With</span><em> Slider Revolution</em></div>
                    <div class="caption lfr medium_grey" data-x="510" data-y="190" data-speed="300" data-start="2500" data-easing="easeOutExpo">Unlimited Transitions</div>
                    <div class="caption sfl" data-x="510" data-y="230" data-speed="300" data-start="2600" data-easing="easeOutExpo"><img src="resources/images/tiles/check.png" /></div>
                    <div class="caption lfr small_text" data-x="560" data-y="228" data-speed="300" data-start="2600" data-easing="easeOutExpo">Sliding, Fading, Slots, Box Transitions<br />
                        <span style="color: #ffe400;">SLIDER REVOLUTION</span> has it all!</div>
                    <div class="caption sfl" data-x="510" data-y="280" data-speed="300" data-start="2900" data-easing="easeOutExpo"><img src="resources/images/tiles/check.png" /></div>
                    <div class="caption lfr small_text" data-x="560" data-y="287" data-speed="300" data-start="2900" data-easing="easeOutExpo">Responsive  Mobile Optimized</div>
                    <div class="caption sfl" data-x="510" data-y="330" data-speed="300" data-start="3200" data-easing="easeOutExpo"><img src="resources/images/tiles/check.png" /></div>
                    <div class="caption lfr small_text" data-x="560" data-y="328" data-speed="300" data-start="3200" data-easing="easeOutExpo">Customizable Navigation<br />Arrows, Bullets, Thumbs</div>
                    <div class="caption sfb" data-x="560" data-y="380" data-speed="1000" data-start="3500" data-easing="easeOutBack"><a href="http://codecanyon.net/user/themepunch/portfolio?ref=themepunch" target="_blank" class="button red small">Don't you love this?</a></div>
                </li>

                <!-- SLIDE LEFT -->
                <li data-transition="slideleft" data-slotamount="10" data-link="http://www.google.de" data-thumb=""> 
                    <img src="resources/images/slides/image16.jpg" />
                    <div class="caption lft big_white" data-x="380" data-y="80" data-speed="900" data-start="1200" data-easing="easeOutBack">We Love Our Clients</div>	
                    <div class="caption lfb" data-x="250" data-y="130" data-speed="900" data-start="1700" data-easing="easeOutBack"><img src="resources/images/slides/company1.png" /></div>			
                    <div class="caption lfb" data-x="450" data-y="130" data-speed="900" data-start="2000" data-easing="easeOutBack"><img src="resources/images/slides/company2.png" /></div>					
                    <div class="caption lfb" data-x="650" data-y="130" data-speed="900" data-start="2300" data-easing="easeOutBack"><img src="resources/images/slides/company3.png" /></div>
                    <div class="caption lfr medium_grey" data-x="330" data-y="340" data-speed="300" data-start="2600" data-easing="easeOutExpo">Need Help with your Project?</div>	
                    <div class="caption lfr medium_text" data-x="630" data-y="342" data-speed="300" data-start="2800" data-easing="easeOutExpo"><a href="#">Get in Touch</a></div>											
                </li>

                <!-- SLIDE DOWN -->
                <li data-transition="slidedown" data-slotamount="1" data-thumb=""> 
                    <img src="resources/images/slides/image17.jpg" />	
                    <div class="caption sfb" data-x="0" data-y="380" data-speed="900" data-start="500" data-easing="easeOutBack"><img src="resources/images/slides/floor.png" /></div>			
                    <div class="caption lfr" data-x="500" data-y="20" data-speed="700" data-start="800" data-easing="easeOutExpo"><img src="resources/images/slides/dude1.png" /></div>		
                    <div class="caption lfr" data-x="550" data-y="20" data-speed="700" data-start="1000" data-easing="easeOutExpo"><img src="resources/images/slides/girl1.png" /></div>	
                    <div class="caption lfl very_big_white" data-x="100" data-y="100" data-speed="300" data-start="1200" data-easing="easeOutExpo">GET THE</div>	
                    <div class="caption lfl very_big_white" data-x="100" data-y="160" data-speed="300" data-start="1300" data-easing="easeOutExpo">PARTY</div>	
                    <div class="caption lfl very_big_white" data-x="100" data-y="220" data-speed="300" data-start="1400" data-easing="easeOutExpo">STARTED</div>	
                    <div class="caption lfb big_white" data-x="100" data-y="300" data-speed="300" data-start="1500" data-easing="easeOutExpo"><a href="#">SIGN UP HERE</a></div>													
                </li>
            </ul>		
            <div class="tp-bannertimer"></div>												
        </div>					
    </div>
</ui:composition>